<template>
	<view>
		<scroll-view scroll-x="true" style="white-space: nowrap; height: 100rpx" :scroll-into-view="tarId" scroll-with-animation="true">
			<view class="flex justify-around align-center">
				<view
					class="mr-3 mb-2 d-inline-block"
					v-for="(item, index) in scollList"
					:key="index"
					:id="'tar' + index"
					:class="tarindex === index ? 'text-main font-lg' : ''"
					@click="selct(index)"
				>
					{{ item.classname }}
				</view>
			</view>
		</scroll-view>

		<!-- :current="tarindex" 与上方导航栏的索引对应，点击导航栏滑动到对应的swiper -->
		<swiper :current="tarindex" @change="swiperchange" :style="{ height: height + 'px' }">
			<swiper-item v-for="(item, index) in newlist" :key="index">
				<view v-if="item.list.length !== 0">
					<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="loadmore(index)">
						<block v-for="(item2, index2) in item.list" :key="index2">
							<topicList :item="item2" :index="index2" :chooes = 'chooes'></topicList>
						</block>
						<loadmore :loadmore="item.loadmore"></loadmore>
					</scroll-view>
				</view>

				<view v-if="!item.isloading"></view>

				<!-- 没数据时显示的图片 -->
				<view v-else>
					<noThing></noThing>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import topicList from '../../compoment/news/topicList.vue';
import { getList, getTopicByClassId } from '@/request/Api/topic.js';
export default {
	data() {
		return {
			height: 600,
			newlist: [],
			scollList: [],
			tarindex: 0,
			tarId: 'tar' + 0,
			chooes:false
		};
	},
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '/pages/search/search'
		});
	},
	//监听用户点击导航栏的按钮事件
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			uni.navigateTo({
				url: '/pages/publish/publish'
			});
		}
	},
	components: {
		topicList
	},
	onLoad(e) {
		if(e.chooes)
		{
			this.chooes = true
		}
		// 这里获取的是去掉标题和tarbar剩余的屏幕的高度
		uni.getSystemInfo({
			success: (res) => {
				this.width = res.windowWidth;
				this.height = res.windowHeight - uni.upx2px(100) - res.statusBarHeight - 40;
			}
		});
		getList().then((res) => {
			this.scollList = res.data;
			this.getdata();
		});
	},
	methods: {
		loadmore(index) {
			let item = this.newlist[index];
			// 这里应该判断一下，不能让用户一直上拉加载，这样服务器的压力很大
			if (item.loadmore !== '上拉加载更多') return;

			item.loadmore = '加载中';

			getTopicByClassId({
				classId: this.scollList[index].id,
				current: item.page
			}).then((res) => {
				item.list = [...item.list, ...res.data];
				if (res.data.length < 10) {
					item.loadmore = '没有更多数据了';
				} else {
					item.page++;
					item.loadmore = '上拉加载更多';
				}
			});
		},
		//获取每个导航栏的数据并给一个数组
		getdata() {
			for (let i = 0; i < this.scollList.length; i++) {
				let obj = {
					loadmore: '上拉加载更多',
					list: [],
					page: 1,
					isloading: false
				};
				this.newlist.push(obj);
			}
			getTopicByClassId({ classId: 1, current: 1 }).then((res) => {
				this.newlist[0].list = res.data.map((item) => {
					return {
						id:item.id,
						type: item.type,
						topicClassId: item.topicClassId,
						titlepic: item.titlepic,
						title: item.title,
						description: item.description,
						dynamic: item.postCount,
						todayPostCount: item.todayPostCount
					};
				});
				this.newlist[0].isloading = true;
				this.newlist[0].page++;
				if (res.data.length < 10) {
					this.newlist[0].loadmore = '没有更多了';
				}
			});
		},

		//关注
		flollow(e) {
			this.list[e.index].isFollow = !this.list[e.index].isFollow;
		},
		//顶踩
		dosupport(e) {
			let item = e.item;
			let msg = e.type === 'support' ? '顶' : '踩';
			// 如果没有顶踩过，就直接++
			if (item.support.type === '') {
				if (e.type === 'support') {
					item.support.support_count++;
				} else {
					item.support.unsupport_count++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.support.type === 'support' && e.type === 'unsupport') {
				item.support.support_count--;
				item.support.unsupport_count++;
			}
			//如果踩过，现在要顶
			else if (item.support.type === 'unsupport' && e.type === 'support') {
				item.support.support_count++;
				item.support.unsupport_count--;
			}
			item.support.type = e.type;
			uni.showToast({
				title: msg,
				mask: true
			});
		},

		//点击导航栏，跳转到对应的内容
		selct(index) {
			this.tarindex = index;
			this.tarId = 'tar' + index;
		},
		//滑动下面的页面相应改变导航栏
		swiperchange(e) {
			this.selct(e.detail.current);
			if (this.newlist[e.detail.current].isloading) {
				return;
			}
			getTopicByClassId({ classId: this.scollList[e.detail.current].id, current: this.newlist[e.detail.current].page }).then((res) => {
				this.newlist[e.detail.current].list = res.data.map((item) => {
					return {
						id:item.id,
						type: item.type,
						topicClassId: item.topicClassId,
						titlepic: item.titlepic,
						title: item.title,
						description: item.description,
						dynamic: item.postCount,
						todayPostCount: item.todayPostCount
					};
				});
				this.newlist[e.detail.current].isloading = true;
				this.newlist[e.detail.current].page++;
				if (res.data.length < 10) {
					this.newlist[e.detail.current].loadmore = '没有更多了';
				}
			});
		}
	}
};
</script>

<style>
page {
	box-sizing: border-box;
}
</style>
